<template>
	<view class="page">
		<!-- 地图  -->
		<view class="w-100 h-100">
			<map id="map1" ref="map1" style="width: 100%; height: 100%;" 
			  show-location
			  show-compass
			  :latitude="latitude" :longitude="longitude"
			  :controls="controls"
			  :circles="circles"
			  :markers="markers"
			  @controltap="controltap"
			  @tap="changeStatus">
			</map>
		</view>
		<!-- end 地图 -->
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	
	export default {
		data() {
			return {
				scrollH: 600,
				mapContext: null,
				latitude: 0,
				longitude: 0,
				circles: [],
				//标记点数组
				markers: [],
				query: {
					pageNum: 1,
					pageSize: 50
				},
				list: [],
				controls: []
			}
		},
		computed: {
			...mapState({
				loginStatus: state => state.loginStatus
			})
		},
		created() {
			// 登录状态
			if (!this.loginStatus)  {
				uni.reLaunch({
					url: '../login/login'
				})
			}
			this.mapContext = uni.createMapContext('map1', this)
			this.init();
		},
		onHide() {
			clearInterval(this.timer);
		},
		methods: {
			init() {
				this.getList();
			},
			getList() {
				this.$H.get('/water/device_info/list', this.query, {token: true}).then(res => {
					console.log(res)
					this.list = res.rows
					
					this.latitude = this.list[0].lat
					this.longitude = this.list[0].lng
					
					// 标记点
					this.markerList()
					// this.circleList()
				})
			},
			changeStatus() {
				this.tabbarHide();
			},
			// 点击地图控件时触发
			controltap(e) {
				let controlId = e.detail.controlId

				if (controlId === 1) {
					this.isGetLocation();
				} else if (controlId === 2) {
					this.getList();
					uni.showToast({ title: '刷新成功', icon: 'none' });
				}
			},
			// 地图上显示圆
			circleList() {
				this.circles = [{
					latitude: this.latitude,
					longitude: this.longitude,
					radius: 30,
					color: '#A9A5A0',
					fillColor: '#A9A5A0'
				}]
			},
			// 地图标记点
			markerList() {
				this.markers = new Array();
				this.list.forEach((item, index) => {
					this.markers.push({
						id: index, 
						title: item.deviceId,
						latitude: item.lat,
						longitude: item.lng,
						iconPath:  this.iconText(item.gear, item.isOnline),
						label: {
							content: this.labelText(item.gear, item.isOnline, item.x, item.y),
							color: '#fb1782',
							fontSize: 12,
							borderRadius: 5,
							padding: 5,
							bgColor: '#FFFFFF'
						}
					})
				}) // end this.list.forEach
			},
			// 地图标记 icon
			iconText(val, online) {
				if (val > 0) {
					if (online) {
						return '../../static/yjg/open.png'
					} else {
						return '../../static/yjg/openoffline.png'
					}
					
				} else {
					if (online) {
						return '../../static/yjg/close.png'
					} else {
						return '../../static/yjg/closeoffline.png'
					}
					
				}
			},
			// 地图 label 文字
			labelText(val, online, x, y) {
				if (val > 0) {
					if (online) {
						return `打开、在线\r\nX轴：${x}°,Y轴：${y}°`
					} else {
						return `打开、离线\r\nX轴：${x}°,Y轴：${y}°`
					}
				} else {
					if (online) {
						return '关闭、在线'
					}
					return '关闭、离线'
				}
			},
			tabbarHide() {
				uni.showTabBar({ animation: true });
				
				this.timer = setTimeout(_ => {
					uni.hideTabBar({ animation: true })
				}, 1000 * 5);
			},
			// 弹出获取授权（地理，个人微信信息等授权信息）弹窗
			getAuthorizeInfo(scope = "scope.userLocation"){
				uni.authorize({
					scope: scope,
					success: () => { // 允许授权
						this.getLocationInfo();
					},
					fail: () => {    // 拒绝授权
						uni.showToast({ title: '你拒绝了授权，无法获得信息', icon: 'none' })
					}
				})
			},
			// 获取地理位置
			getLocationInfo(){ 
				uni.getLocation({
					type: 'wgs84',
					altitude: true,
					success: (res) => {
						this.latitude = res.latitude;
						this.longitude = res.longitude;
					}
				});
			},
			// 检查当前是否已经授权访问scope属性
			isGetLocation(scope = "scope.userLocation"){
				uni.getSetting({
					success: (res) => {					
						if (!res.authSetting[scope]) {
							this.getAuthorizeInfo()
						} else {
							this.getLocationInfo()
						}
					}
				});
			}
		}, // end methods
		onReady() {
			this.isGetLocation();
			
			const res = uni.getSystemInfoSync()
			const height = res.windowHeight;
			const width  = res.windowWidth;
			this.controls = [{
				id: 1,	//当前位置
				iconPath: '/static/imgs/position.png',
				position: {
					left: 16,
					top: height - 2 * 38,
					width: 38,
					height: 38
				},
				clickable: true
			}, {
				id: 2,	// 刷新
				iconPath: '/static/imgs/refresh.png',
				position: {
					left: width / 2 - 25,
					top: height - 2 * 50,
					width: 50,
					height: 50
				},
				clickable: true
			}]
		}
	}
</script>

<style>
	
</style>
